
*{
	margin:0;
	padding:0;
	list-style:none;
}
.main{
	width:660px;
	border:1px solid #ccc;
	height:440px;
	margin:20px auto;
}
.main .aa{
	width:200px;
	height:200px;
	overflow:hidden;
	position:relative;
	margin:10px;
	float:left;
}
.main .bb{
	width:200px;
	background:rgba(0, 0 ,0 ,0.5);
	position:absolute;
	top:40px;
	left:0;
	text-align:center;
	color:#fff;
	transform:rotate(55deg);
	transition:all 0.5s;
	overflow:hidden;
	height:0;
	z-index:1;
}
.main .bb h3{
	color:#fff;
	border-bottom:2px solid rgba(255, 255 ,255, 0.5);
	padding-bottom:10px;
	padding-top: 10px;
}
.main .bb p{
	line-height: 50px;
	padding: 10px 0;
}
.main .aa:hover .bb{
	height:120px;
	transform:rotate(0deg);
}
/*before   after为选择器，一般给选择器加动画背景，设置动画样式*/
.main .aa:before{
	content:""; /*插入空字符*/
	position:absolute;
	top:-240px;
	right:0;
	width:360px;
	height:360px;
	background:rgba( 150, 50, 100,0.5);
	transform:rotate(55deg) translateX(60px);
	transform-origin:100% 0%;
	transition:all 0.5s ease 0.3s;
}
.main .aa:hover:before{
	top:0;
}
.main .aa:after{
	content:"";
	position:absolute;
	bottom:-240px;
	left:0;
	width:360px;
	height:360px;
	background:rgba( 150, 50, 100,0.5);
	transform:rotate(55deg) translateX(-60px);
	transform-origin:0% 100%;
	transition:all 0.5s ease 0.3s;
}
.main .aa:hover:after{
	bottom:0px;
}